<template>
  <v-container>
    <v-row class="list">
      <v-col v-for="item in list" :key="item.id" cols="12" sm="6">
        <NuxtLink class="card" :to="localePath({ path: `/cardetail/${item.id}` })">
          <div class="car-name">{{ item.brand.brand_name }}/{{ item.carmodel.model_num }}</div>
          <div class="aspect-box">
            <div class="aspect-content">
              <v-lazy
                :options="{
                  threshold: 0.5
                }"
                style="width: 100%; height: 100%"
              >
                <img :src="item.image" style="object-fit: cover; width: 100%; height: 100%" />
              </v-lazy>
            </div>
          </div>
          <v-simple-table class="price" fixed-header height="240px">
            <template #default>
              <thead>
                <tr>
                  <th class="text-left">
                    {{ $t('times') }}
                  </th>
                  <th class="text-center" colspan="2">
                    {{ $t('price') }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-if="item.price && item.price.three_hourprice != 0">
                  <td>3 H</td>
                  <td class="text-right">
                    {{ $t('coin') }} {{ item.price.three_hourprice | coinF }}
                  </td>
                  <td
                    v-if="
                      item.price.three_hourprice_origin && item.price.three_hourprice_origin != 0
                    "
                    class="strikethrough"
                  >
                    {{ $t('coin') }} {{ item.price.three_hourprice_origin | coinF }}
                  </td>
                  <td v-else />
                </tr>
                <tr v-if="item.price && item.price.six_hourprice && item.price.six_hourprice != 0">
                  <td>6 H</td>
                  <td class="text-right">
                    {{ $t('coin') }} {{ item.price.six_hourprice | coinF }}
                  </td>
                  <td
                    v-if="item.price.six_hourprice_origin && item.price.six_hourprice_origin != 0"
                    class="strikethrough"
                  >
                    {{ $t('coin') }} {{ item.price.six_hourprice_origin | coinF }}
                  </td>
                  <td v-else />
                </tr>

                <tr v-if="item.price && item.price.daysprice != 0">
                  <td>24 H</td>
                  <td class="text-right">{{ $t('coin') }} {{ item.price.daysprice | coinF }}</td>
                  <td
                    v-if="item.price.daysprice_origin && item.price.daysprice_origin != 0"
                    class="strikethrough"
                  >
                    {{ $t('coin') }} {{ item.price.daysprice_origin | coinF }}
                  </td>
                  <td v-else />
                </tr>
                <tr v-if="item.price && item.price.dayout_daysprice != 0">
                  <td>24 H+</td>
                  <td class="text-right">
                    {{ $t('coin') }} {{ item.price.dayout_daysprice | coinF }}
                  </td>
                  <td
                    v-if="
                      item.price.dayout_daysprice_origin && item.price.dayout_daysprice_origin != 0
                    "
                    class="strikethrough"
                  >
                    {{ $t('coin') }} {{ item.price.dayout_daysprice_origin | coinF }}
                  </td>
                  <td v-else />
                </tr>
              </tbody>
            </template>
          </v-simple-table>
          <div class="description">
            <v-icon color="darken-2" size="20px" class="mr-1">
              {{ icons.mdiAccount }}
            </v-icon>
            <span class="mr-1 mr-sm-5 text-caption text-sm-body-1">{{ item.seats }}</span>
            <template v-if="item.automatic == '1'">
              <v-icon color="darken-2" size="20px" class="mr-1">
                {{ icons.mdiWrench }}
              </v-icon>
              <span class="text-caption text-sm-body-1">{{ $t('automatic') }}</span>
            </template>
            <template v-else>
              <v-icon color="darken-2" size="20px" class="mr-1">
                {{ icons.mdiWrench }}
              </v-icon>
              <span class="text-caption text-sm-body-1">{{ $t('noautomatic') }}</span>
            </template>
          </div>
          <div class="store">{{ item.store.name }}</div>
        </NuxtLink>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { mdiAccount, mdiWrench } from '@mdi/js';

export default {
  name: 'CarList',
  filters: {
    coinF(number) {
      const numStr = number.toString();
      return numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data: () => ({
    icons: {
      mdiAccount,
      mdiWrench
    }
  })
};
</script>
<style scoped lang="scss">
@media screen and (max-width: 1200px) {
  .list {
    padding: 0 12px;
  }
}
.list {
  .card {
    display: block;
    height: 100%;
    position: relative;
    background: #ffffff;
    box-shadow: 0px 18px 49px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    text-decoration: none;
    padding: 8px 16px;

    .car-name {
      padding: 8px 0;
      font-weight: bold;
      font-size: 18px;
    }

    .store {
      margin-top: 8px;
      font-size: 16px;
    }
  }
}
.aspect-box {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 比例的计算公式：(9/16)*100% */
  position: relative;
}

.aspect-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
